<template>
  <div v-if="isShow">
    <div id="body">
      <!-- 头像设置 -->
      <div id="Mheader">
        <van-image
          round
          width="5rem"
          height="5rem"
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <!-- 用户信息展示 -->
        <div>
          <van-cell-group>
            <van-cell :title="data.username" class="uname" />
            <van-cell :title="`志愿者编号:000${data.id}`" class="vnum" />
          </van-cell-group>
        </div>
      </div>
      <!-- 项目概览 -->
      <van-cell-group >
        <van-cell title="我的项目" class="uname" />
        <div id="detail" v-if="type == true">
          <div>{{ data.stadium1 }}</div>
          <div>{{ data.service }}</div>
        </div>
        <div id="non" v-else>
          <van-button round type="info" to="/ambition" >志愿者申请</van-button>
        </div>
        
      </van-cell-group>
      <!-- 用户控制面板 -->
      <van-grid :column-num="3" icon-size="35px" clickable>
        <!-- 我的项目 -->
        <van-grid-item icon="newspaper-o" text="我的项目" to="/volunteer" />

        <!-- 志愿者证件 -->
        <van-grid-item
          icon="credit-pay"
          text="志愿者证"
          is-link
          @click="showPopupCard"
        />

        <van-popup v-model="showCard" class="overlay70vh"> 等待添加 </van-popup>

        <!-- 使用规则 -->
        <van-grid-item
          icon="warn-o"
          text="使用规则"
          is-link
          @click="showPopupRule"
        />
        <van-popup v-model="showRule" class="overlay70vh">
          <p>
            一、校内读者凭本人有效的读者证件进馆；校外人员来馆联系工作，需出示本人有效证件在本馆登记，然后进馆。
          </p>
          <p>二、举止文明礼貌，衣着整洁。</p>
          <p>三、加强公德意识，勿用物品占用阅览座位。</p>
          <p>四、保持馆内安静，禁止喧哗，进入阅览室请将手机置于静音状态。</p>
          <p>
            五、保持馆内整洁卫生，禁止将食物及饮料带入馆内，禁止乱丢废弃物。
          </p>
          <p>
            六、爱护馆内的一切公共设施，禁止随意涂抹刻画，禁止随意张贴或散发广告及其它宣传品。
          </p>
          <p>
            七、保护图书馆和读者的安全，禁止在馆内任何地点吸烟，禁止携带易燃、易爆物品入馆。
          </p>
          <p>八、自觉遵守图书馆各项规定，服从工作人员管理。</p>
          <p>
            九、违反上述规定者，将受到停权及经济处罚，情节严重者，将负刑事责任。
          </p>
        </van-popup>
        <!-- 我的资料 -->
        <van-grid-item icon="records" text="我的资料" to="/myinfo" />
        <!-- 修改密码 -->
        <van-grid-item icon="warning-o" text="修改密码" to="/modify" />
        <!-- 常见问题 -->
        <van-grid-item
          icon="question-o"
          text="常见问题"
          is-link
          @click="showPopupIssue"
        />
        <van-popup v-model="showIssue" class="overlay70vh">
          <p>
            1、外借图书请在规定的期限内归还，否则，每册图书每天收0.1元逾期使用费。
          </p>
          <p>
            2、寒、暑假到期应还回的图书，可在开学后1周内还书，免收图书逾期使用费。如果在法定假期内应还者，则相应延迟还出时间；如果图书在法定假期之前已到还书日期，逾期使用费从实际到期日起（包括假期）累计计算。
          </p>
          <p>
            3、读者到外地出差、实习，时间过长不能按期还书的，应在外出前由院系办公室出具证明（注明返校时间），图书馆办公室确认后可延长外借时间；逾期后再补证明视为无效，按过期处理。
          </p>
          <p>
            4、出国人员在出国前需清还图书，如未经允许私自带走，逾期按规定收取违约金。
          </p>
          <p>5、遗失图书如超过借阅期限，在赔偿图书时将另收逾期使用费。</p>
        </van-popup>
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.userCheck();
    this.getData();
  },
  data() {
    return {
      isShow: true,
      showRule: false,
      showIssue: false,
      showCard: false,
      data: "",
      type: false,
    };
  },
  methods: {
    // 展示弹窗控制
    showPopupRule() {
      this.showRule = true;
    },
    showPopupIssue() {
      this.showIssue = true;
    },
    showPopupCard() {
      this.showCard = true;
    },
    // 获取用户信息
    getData() {
      this.axios
        .get(`user?username=${window.sessionStorage.getItem("name")}`)
        .then((res) => {
          this.data = res.data.results;
          this.$store.commit("saveUserData", this.data);
        });
    },
    // 判断志愿者项目
    serviceCheck() {
      if (data.service) {
        this.type = true;
      } else {
        this.type = false;
      }
    },
    // 用户登录状态验证
    userCheck() {
      if (window.sessionStorage.getItem("name")) {
        this.isShow = true;
      } else {
        this.isShow = false;
        this.$router.push("/login");
      }
      console.log(this.isShow);
    },
  },
};
</script>
<style scoped>
#body {
  margin: 0 auto;
  background-color: #f8f8f8;
}
#Mheader {
  display: flex;
  padding: 10px 16px;
  background-color: #fff;
}
#detail {
  display: flex;
  justify-content: space-around;
  padding: 2px;
}
#non {
  height: 10vh;

  text-align: center;
}
.overlay70vh {
  width: 90vw;

  line-height: 1.5em;
}
.van-cell::after {
  border: none;
}
.uname {
  font-size: 20px;
  font-weight: 700;
}
.vnum {
  color: #888;
}
.van-hairline--top {
  margin-top: 10px;
}
</style>
